﻿let Status = [{
    status: -1,
    name: '全部'
}, {
    status: 0,
    name: '空闲'
}, {
    status: 1,
    name: '占用'
}, {
    status: 2,
    name: '不可用'
}]

let where = {
    number: '',
    type: '',
    status: -1
};
let Tnumber = document.querySelector("#Tnumber");







let query = document.querySelector("#query");

query.onclick = function () {
    where.number = Tnumber.value;
    getTable();
    Tnumber.value = "";
}
let Ttypes = document.querySelector(".Table .Tabletype .Types");


function getTableType() {
    Ttypes.innerHTML = '';

    $.get("/Table/GetTableType").then((res) => {


        let alloption = document.createElement("div");
        alloption.className = "option active";
        alloption.innerHTML = "全部";

        alloption.onclick = function () {
            let options = Ttypes.querySelectorAll(".option");
            options.forEach((item) => {
                item.classList.remove("active");
            });
            alloption.classList.add("active");

            where.type = "";
            where.number = "";
            Tnumber.value = "";
            getTable();

        }

        Ttypes.appendChild(alloption);


        res.data.forEach((item, i) => {

            let option = document.createElement("div");
            option.className = "option";




            let name = document.createElement("div");
            name.className = "name";
            name.innerHTML = item.name;
            let Control = document.createElement("div");
            Control.className = "Control";
            let ie = document.createElement("i");
            ie.className = "fas fa-ellipsis-v";
            let TypeMenu = document.createElement("div");
            TypeMenu.className = "TypeMenu";

            let Edit = document.createElement("button");
            Edit.className = "CaiDan";
            Edit.innerHTML = "编辑";

            let Del = document.createElement("button");
            Del.className = "CaiDan";
            Del.innerHTML = "详情";

            Edit.onclick = function () {
                sessionStorage.setItem("id", item.id)
                sessionStorage.setItem("name", item.name)
                location.href = "/Table/UpdateTableHtml"
            }

            Del.onclick = function () {

                sessionStorage.setItem("id", item.id)
                sessionStorage.setItem("name", item.name)
                location.href = "/Table/TableDetialsHtml"
            }



            TypeMenu.appendChild(Edit);
            TypeMenu.appendChild(Del);

            TypeMenu.onclick = function (e) {
                e.stopPropagation();
            }

            Control.appendChild(ie);
            Control.appendChild(TypeMenu);

            option.appendChild(name);
            option.appendChild(Control);



            option.onclick = function () {
                let options = Ttypes.querySelectorAll(".option");
                options.forEach((item) => {
                    item.classList.remove("active");
                });
                option.classList.add("active");


                where.type = item.id;

                getTable();

                Tnumber.value = "";
                where.number = "";
            }

            Ttypes.appendChild(option);
        });


    });
}




getTableType();


let Tables = document.querySelector(".Table .Tables .TableBox");




function getTable() {


    Tables.innerHTML = "";

    var loadTalbe = Peng.load({ box: 'Cols', style: 'circle', color: 'ZhutiSe', content: '加载桌子数据中.....' });

    let addTable = document.createElement("div");
    addTable.className = "addTable";
    addTable.innerHTML = "<i class='fas fa-plus-circle'></i>";
    addTable.onclick = function () {
        window.location.href = "/Index/AddTableHtml";
    }
    Tables.appendChild(addTable);


    $.get("/Table/getTable", {
        number: where.number,
        type: where.type,
        status: where.status
    }).then((res) => {
        console.log(res.data);
        res.data.forEach((item, e) => {



            let table_option = document.createElement("div");
            table_option.className = "table_option"


            let top = document.createElement("div");
            top.className = "top";

            let Ttitle = document.createElement("div");
            Ttitle.className = "Ttitle";

            let Tname = document.createElement("div");
            Tname.className = "Tname";
            Tname.innerHTML = item.number;

            let more = document.createElement("div");
            more.className = "more";


            let i = document.createElement("i");
            i.className = "fas fa-ellipsis-v";



            let Menu = document.createElement("div");
            Menu.className = "Menu";

            let KaiTai = document.createElement("button");
            KaiTai.className = "option";
            KaiTai.innerHTML = '开台';

            let Edit = document.createElement("button");
            Edit.className = "option";
            Edit.innerHTML = '编辑';

            let Details = document.createElement("button");
            Details.className = "option";
            Details.innerHTML = '详情';
            // 0 = 空闲 1 = 占用 2 = 不可用 

            let AddGood = document.createElement("button");
            AddGood.className = "option";
            AddGood.innerHTML = '加一单';


            if (item.status == 1) {

                Menu.appendChild(AddGood);


            }


            if (item.status == 0) {
                Menu.appendChild(KaiTai);
                Menu.appendChild(Edit);


            }
            Menu.appendChild(Details);


            KaiTai.onclick = function () {
                let Tab = {
                    id: item.id,
                    name: item.number
                }

                sessionStorage.removeItem("Oid");

                sessionStorage.setItem("Tab", JSON.stringify(Tab));
                location.href = "/Order/BuyOrderHtml";
            }
            AddGood.onclick = function () {
                let Tab = {
                    id: item.id,
                    name: item.number
                }
                sessionStorage.removeItem("Oid");
                sessionStorage.setItem("Tab", JSON.stringify(Tab));
                location.href = "/Order/BuyOrderHtml";
            }
            Edit.onclick = function () {
                sessionStorage.setItem("tid", item.id);
                sessionStorage.setItem("typeid", item.type);
                sessionStorage.setItem("status", item.status);
                sessionStorage.setItem("number", item.number);
                sessionStorage.setItem("sumber", item.sumber);
                sessionStorage.setItem("occupy", item.occupy);
                location.href = "/Table/EditTableHtml";
            }



            more.appendChild(i);
            more.appendChild(Menu);

            Ttitle.appendChild(Tname);
            Ttitle.appendChild(more);

            let talbeInfo = document.createElement('div');
            talbeInfo.className = "talbeInfo";
            let icon = document.createElement("div");
            icon.className = "icon";
            talbeInfo.appendChild(icon);


            let ErWeiMa = document.createElement("img");
            ErWeiMa.src = item.ErWeiMa;
            icon.appendChild(ErWeiMa);

            let info = document.createElement("div");
            info.className = "info";

            let status = document.createElement("div");
            status.className = "status";

            let titleName = document.createElement("div");
            titleName.className = "titleName";
            titleName.innerHTML = "状态：";



            let statusName = document.createElement("div");
            statusName.className = "statusName";
            statusName.innerHTML = '空闲';

            if (item.status == 1) {
                statusName.innerHTML = '占用';
                statusName.style.color = 'var(--ZhuTiSe)';
            }
            if (item.status == 2) {
                statusName.innerHTML = '不可用';
            }
            status.appendChild(titleName);
            status.appendChild(statusName);

            info.appendChild(status);

            let Num = document.createElement("div");
            Num.className = "Num";

            let NumTitle = document.createElement("div");
            NumTitle.className = "titleName";
            NumTitle.innerHTML = "余座：";

            let Renshu = document.createElement("div");
            Renshu.className = "Renshu";
            Renshu.innerHTML = item.sumber - item.occupy;

            Num.appendChild(NumTitle);
            Num.appendChild(Renshu);

            info.appendChild(status);
            info.appendChild(Num);

            talbeInfo.appendChild(info);



            top.appendChild(Ttitle);
            top.appendChild(talbeInfo);


            let bottom = document.createElement("div");
            bottom.className = "bottom";

            let bottomtitle = document.createElement("div");
            bottomtitle.className = "titlename";
            bottomtitle.innerHTML = "占用人数";

            let bottomicon = document.createElement("div");
            bottomicon.className = "icon";

            for (let i = 1; i <= item.sumber; i++) {
                let prople = document.createElement("i");
                prople.className = "fas fa-male";

                if (i <= item.occupy) {
                    prople.className = "fas fa-male active";
                }
                bottomicon.appendChild(prople);
            }

            let FenQu = document.createElement("div");
            FenQu.className = "FenQu";

            FenQu.innerHTML = ` <span class="ZhanYon">${item.occupy}</span>
            <span>/</span>
         
            <span class="ZongGong">${item.sumber}</span>`;

            bottom.appendChild(bottomtitle);
            bottom.appendChild(bottomicon);
            bottom.appendChild(FenQu);

            table_option.appendChild(top);
            table_option.appendChild(bottom);

            Tables.appendChild(table_option);



        });
        loadTalbe.remove();
    });



}
Peng_Select.CreateElement('StatusSelect', Status, 'name', (res) => {
    where.status = res.status;

    Tnumber.value = "";

    where.number = "";
    getTable();
});
